<!--
 * @Author: fishroom
 * @Date: 2021-08-22 15:47:44
 * @LastEditTime: 2021-08-22 17:07:55
 * @FilePath: \index\src\components\common\swiper\RankingSlides.vue
-->
<template>
  <div class="slides2">
    <swiper class="swiper-container" :options="swiperOption">
      <swiper-slide v-for="(items, index) in getlist" :key="index">
        <h2 class="ranking-title">{{ items.title }}<em>&#xe629;</em></h2>
        <div
          v-for="(item, ind) in items.list"
          :key="ind"
          class="flex  ranking-box"
        >
          <div>
            <img :src="items.img" alt="" class="ranking-img" />
          </div>
          <div class="ranking-text-flex">
            <div class="flex r-text-box">
              <div class="r-text">
                <em class="ranking-num">{{ ind + 1 }}</em>
                <em class="ranking-name">{{ item.first }}</em>
                <span class="ranking-user"
                  ><i class="r-m">-</i>{{ item.second }}</span
                >
              </div>
              <span class="r-m-new">new</span>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "RankingSlides",
  props: {
    swiperOption: {
      type: Object,
      default() {
        return {};
      }
    },
    imgClass: {
      type: String,
      default() {
        return "";
      }
    },
    textClass: {
      type: String,
      default() {
        return "";
      }
    }
  },
  computed: {
    getlist() {
      return this.$store.state.rankingList;
    }
  }
};
</script>

<style lang="scss">
.slides2 {
  width: 100%;
  height: 100%;
}

.ranking-img {
  width: 35px;
  height: 35px;
  border-radius: 4px;
}

.ranking-title {
  margin: 10px 0;
  font-family: "iconfont" !important;
  color: #fff;
  em {
    font-weight: 500;
  }
}

.ranking-box {
  width: 100%;
  gap: 15px;
  margin-bottom: 10px;
}

.ranking-text-flex {
  flex: 1;
  width: 85%;
}
.r-text {
  width: 70%;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.r-text-box {
  justify-content: space-between;
  margin-top: 10px;
  color: #fff;
}
.ranking-num {
  font-weight: bold;
}
.ranking-name {
  margin-left: 7px;
}
.ranking-user {
  font-size: 13px;
  color: #dedede;
}
.r-m {
  margin: 0 5px;
}
.r-m-new {
  margin-right: 15px;
}
.my-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
</style>
